<template>
    <div class="cc">
        <h2>购物车</h2>
        <label for="price">单价</label>
        <input type="number" v-model="price" id="price" />

        <label for="quantity">数量</label>
        <input type="number" v-model="quantity" id="quantity" />

        <button @click="total = price * quantity">计算总价</button>

        <p>单价:{{ price }}</p>
        <p>数量:{{ quantity }}</p>
        <p>总价:{{ total }}</p>
    </div>
</template>

<script setup>
import {ref} from 'vue'

const price = ref(0) //定义单价
const quantity=ref(0) //定义数量
const total=ref(0) //总价

</script>

<style scoped>
/* 样式可以根据需要添加 */
.cc{
    background-color: rgb(249, 233, 213);
    border-radius:15px;
    padding:20px;
}
</style>